<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source//jquery.min.js"></script>
</head>
<body>
    <ul>
        <li class="start">111</li>
        <li>222</li>
        <li class="active">333</li>
        <li class="a">444</li>
        <li class="end">555</li>
    </ul>
    <div class="box"></div>
    <script>
        // 1.基本选择器
        // 2.特殊选择器
        // 3.筛选方法


        // 基本选择器演示
        console.log($('ul li'));//这样写就类似于querySelectorAll()，注意返回的同样不是真的数组，可以通过Array.from()转换一下
        console.log($('.box'));//就算所选元素整个页面只有一个符合条件，也会返回伪数组。没有就返回空的伪数组


        // 特殊选择器演示
        console.log($('ul li:first')); 
        console.log($('ul li:last')); 
        console.log($('ul li:eq(0)'));//按照索引值 
        console.log($('ul li:odd'));//奇数，注意索引是0开始的，所以会把1,3..选出来，跟我们国内1开始计数的习惯不同
        console.log($('ul li:even'));//偶数，0也算偶数


        // 二次筛选演示
        console.log($('ul li').first());
        console.log($('ul li').last());
        console.log($('ul li').eq(0));

        console.log($('li.active').next());//找到目标节点的下一个兄弟节点
        console.log($('li.active').nextAll());//找到目标节点后面的所有兄弟节点
        console.log($('li.active').nextAll('.a'));//这个方法也可以通过传入筛选条件的方式筛选
        console.log($('ul li.active').nextUntil('.end'));//一直往后拿直到找到class为end的,如果不传入则找到最后一个

        console.log($('ul li.active').prev());//找到目标节点的上一个兄弟节点
        console.log($('ul li.active').prevAll());//找到目标节点前面的所有兄弟节点，同样也可以传入参数作为筛选条件
        console.log($('ul li.active').prevUntil('.start'));//一直往前找直到找到class为start的

        console.log($('ul li.active').parent());//找到目标元素的父元素节点
        console.log($('ul li.active').parents());//找到目标元素的所有的长辈节点，直到html

        console.log($('ul li.active').siblings());//找到目标节点的前后所有的兄弟节点，除了自己

        console.log($('ul').children());//找到目标节点的所有的子代节点

        console.log($('ul').find('li'));//找到目标节点里符合条件的子代节点

        console.log($('ul li.active').index());//获取索引
    </script>
</body>
</html>